<template>
	<view>

		<view @touchmove.prevent="clear" @touchstart.prevent="clear_msg" class="msg-edit" @tap.stop="clear_msg"
			v-if="show_msg_edit.style">
			<view @tap.stop="clear" class="msg-edit-box color-ffffff"
				:class="[show_msg_edit.style || '',show_msg_edit.style2 || '']" @touchstart.stop="clear"
				:style="{top:show_msg_edit.top + 'px'}">
				<view @tap="handel_one(item)" hover-class="click1" v-for="(item,index) in powersList" :key="index"
					class="flex flex-y flex-x-y" style="width: 20%;margin: 14rpx 0;">
					<view class="flex flex-x-y" style="width: 36rpx;height: 36rpx;">
						<image style="width: 30rpx;height:30rpx" :src="item.src"></image>
					</view>
					<view style="line-height: 40rpx;margin-top: 8rpx;font-size: 26rpx;">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<toast ref="toast">
			<view slot="center">
				<view class="flex flex-d-c flex-y-start pl-40 pr-40 pt-40">
					<view class="fs-30 color-333333">
						添加到收藏
					</view>
					<view class="mt-20 flex flex-y-center" style="width: 100%;">
						<view style="width: 68rpx;height:68rpx;margin-right: 20rpx;">
							<image style="width: 68rpx;height:68rpx;border-radius: 50%;" :src="info.avatarUrl"></image>
						</view>

						<view v-if="info.type == 'IMAGE'">
							<image :src="info.content" mode="aspectFit" style="height: 200rpx;width:200rpx;"></image>
						</view>
						<view v-if="info.type == 'VOICE'" class="p-20 bg-msg over-line1"
							style="border-radius: 16rpx;max-width: 100%;">
							<view class="flex flex-y-center">
								<text class="iconfont icon-shengbo fs-28"></text>
								<view class="ml-20">
									{{info.time}}″
								</view>
							</view>
						</view>
						<view v-if="info.type == 'TEXT'" class="p-20 bg-msg over-line1"
							style="border-radius: 16rpx;max-width: 100%;">
							<text class="fs-28" style="text-align: left;">{{info.content}}</text>
						</view>


					</view>
					<view class="lab-input fs-30">
						<input type="text" placeholder="添加标签" style="text-align: left;" v-model="lab"
							placeholder-style="color:#999">
					</view>
					<view class="history-box">
						<view class="history flex pt-20">
							<view @tap.stop="selectLab(item)" class="history-item fs-26" v-for="(item, i) in labList"
								:key="i">
								{{ item }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</toast>
		<toast ref="toast2"></toast>
	</view>
</template>

<script>
	export default {
		name: "msgEdit",
		props: {

			msgType: {
				type: String,
				default: 'friend',
			},
			id: {
				type: [String, Number],
				default: '',
			},
			role: {
				type: [String, Number],
				default: 'user',
			},

		},
		data() {
			return {
				info: '',
				lab: '',
				labList: [],
				list: [
					// {
					// 	name: '扬声器',
					// 	key: 'voice',
					// 	src: '../../static/chat/msg/edit1.png',
					// },
					// {
					// 	name: '转文字',
					// 	key: 'text',
					// 	src: '../../static/chat/msg/edit2.png',
					// },
					{
						name: '复制',
						key: 'copy',
						src: '../../static/chat/msg/edit9.png',
					},
					{
						name: '收藏',
						key: 'collect',
						src: '../../static/chat/msg/edit3.png',
					},
					{
						name: '回复',
						key: 'reply',
						src: '../../static/chat/msg/edit4.png',
					},
					{
						name: '多选',
						key: 'check',
						src: '../../static/chat/msg/edit5.png',
					},
					{
						name: '撤回',
						key: 'back',
						src: '../../static/chat/msg/edit6.png',
					},
					{
						name: '删除',
						key: 'delete',
						src: '../../static/chat/msg/edit7.png',
					},
					{
						name: '转发',
						key: 'send',
						src: '../../static/chat/msg/edit8.png',
					}
				],
			};
		},
		computed: {
			show_msg_edit() {
				return this.$store.state.show_msg_edit;
			},
			powersList() {
					
				let arr = this.show_msg_edit.powers.filter(val => {
					if (this.msgType == 'group') {
						// return val != 'back' && val != 'delete';
						// return val != 'back' && (val == 'delete' && this.role != 'loader');
						console.log('this.role',this.role);
						if (this.role == 'leader') {
							return val != 'back';
						} else {
							return val != 'back' && val != 'delete';
						}
					}
					if (this.show_msg_edit.info && this.show_msg_edit.info.mine === false) {
						return val != 'back';
					}

					return true;
				})
				return this.list.filter(val => arr.find(v => v == val.key))
			},
		},

		methods: {
			clear_msg() {
				this.vuexSet('show_msg_edit', {});
			},
			handel_one(item) {
				let info = this.clone(this.show_msg_edit.info);
				this.info = this.clone(this.show_msg_edit.info);
				this.clear_msg();
				if (!item.key) return;
				switch (item.key) {
					case 'copy':
						return this.mycopy(info.content);
					case 'check':
						return this.show_check();
					case 'collect':
						return this.collect();
					case 'send':
						return this.send();
					case 'back':
						return this.back();
					case 'delete':
						return this.delete();
					case 'reply':
						return this.reply();
				}
			},
			//多选
			show_check() {
				this.vuexSet('chat_checked_arr', []);
				this.vuexSet('chat_checked', true);

			},
			collect() {
				if (this.info.type == "VOICE") {
					let regex = /\[(.+?)\]/g;
					let str_arr = String(this.info.content).match(regex);
					this.info.time = this.xs(String(str_arr[0]).substr(1, str_arr[0].length - 2), -1);
				}
				this.getCollectLabName()
				this.$refs.toast.open({
					title: '',
					right: '收藏',
					success: () => {
						this.addCollect({
							mesId: this.info.msgId,
							labName: this.lab
						})
					}
				})
			},
			addCollect(data) {
				this.request({
					url: '/userCollect/add',
					method: 'POST',
					data: data
				}).then(res => {
					if (res.status != 200) return
					this.showToast('收藏成功')
				})
			},
			getCollectLabName() {
				this.request({
					url: '/userCollect/getLabNameList',
				}).then(res => {
					if (res.status != 200) return
					this.labList = res.data
				})
			},
			selectLab(item) {
				this.lab = item
			},
			send() {
				this.vuexSet('chat_checked_arr', [this.info]);
				// this.click(() => {
				// 	this.toPage(`/pages/chat/selectChat?title=转发消息&type=tofriend&sure_text=确定&handleSure=send`);
				// });
			},
			back() {
				this.request({
					url: '/chat/withdrawMessageLog',
					method: 'POST',
					data: {
						logId: this.info.msgId,
						type: this.msgType,
						toId: this.id,
					}
				}).then(res => {
					if (res.status != 200) return
					this.$emit('backMsg', [this.info.msgId])
				})
			},
			delete() {

				this.$refs.toast2.open({
					title: '是否确定删除此条聊天记录',
					success: () => {
						this.request({
							url: this.msgType == 'friend' ? '/chat/delMessageLog' :
								(`/group/groupUserdelMsg?msgId=${this.info.msgId}`),
							method:this.msgType == 'friend' ? 'POST': 'GET',
							data: [{
								id: this.info.msgId,
								mine: this.info.mine
							}],
						}).then(res => {
							if (res.status != 200) return

							this.$emit('deleteMsg', [this.info.msgId])

						})
					}
				});

			},
			// 回复
			reply() {
				getApp().globalData.CHAT_REPLY(this.info.content, this.info.msgId);
			},
		}
	}
</script>

<style lang="scss">
	.msg-edit {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 999999;
		background-color: rgba(0, 0, 0, 0);
		animation: editshow 0.5s;
	}

	.msg-edit-box {
		position: fixed;
		width: 622rpx;
		background-color: #494D4E;
		display: flex;
		border-radius: 14rpx;
		flex-flow: row wrap;
		z-index: 30;
		left: 64rpx;
		padding: 20rpx;

	}

	.msg-edit-box.top {
		transform: translateY(-100%);
	}

	//上面 左边
	.msg-edit-box.style1::before {
		content: '';
		width: 30rpx;
		height: 60rpx;
		background-color: #494D4E;
		border-radius: 6rpx;
		position: absolute;
		left: 40rpx;
		top: -12rpx;
		transform: rotate(45deg);
	}

	//上面 右边
	.msg-edit-box.style2::before {
		content: '';
		width: 30rpx;
		height: 30rpx;
		background-color: #494D4E;
		border-radius: 6rpx;
		position: absolute;
		right: 60rpx;
		top: -12rpx;
		transform: rotate(45deg);
	}

	//下面 左边
	.msg-edit-box.style3::before {
		content: '';
		width: 30rpx;
		height: 30rpx;
		background-color: #494D4E;
		border-radius: 6rpx;
		position: absolute;
		left: 60rpx;
		bottom: -12rpx;
		transform: rotate(45deg);
	}

	//下面 右边
	.msg-edit-box.style4::before {
		content: '';
		width: 30rpx;
		height: 30rpx;
		background-color: #494D4E;
		border-radius: 6rpx;
		position: absolute;
		right: 60rpx;
		bottom: -12rpx;
		transform: rotate(45deg);
	}

	@keyframes editshow {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.pt-40 {
		padding-top: 40rpx;
	}

	.bg-msg {
		background-color: #FDEEE2;
	}

	.history-box {
		overflow-x: scroll;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.history {
		flex-wrap: nowrap;
		width: 490rpx;
	}

	.history-item {
		padding: 0rpx 20rpx;
		border: 1rpx solid #FD7747;
		color: #FD7747;
		border-radius: 30rpx;
		margin-right: 15rpx;
		white-space: nowrap;
	}

	.lab-input {
		width: 100%;
		color: #333333;
		background-color: #F5F5F5;
		padding: 12rpx 20rpx;
		margin-top: 20rpx;
		border-radius: 8rpx;
	}
</style>